<template>
	<view class="hot-search">
		<!-- 自定义导航栏 -->
		<headerNav />
		
		<!-- 图片 -->
		<view class="u-f u-f-ajc">
			<image src="/static/search/hot-search.png" mode="widthFix" class="main-imgs"></image>
		</view>
		
		<!-- 热搜 list列表 -->
		<view class="hot-list">
			<block v-for="item in hotSearchList" :key="item.id">
				<hotListItem :item="item"></hotListItem>
			</block>
		</view>
		
	</view>
</template>

<script>
	import hotListItem from '@/components/hotSearch/hotListItem.vue'
	import headerNav from '@/common/components/headerNav/headerNav.vue';
	export default {
		data() {
			return {
				hotSearchList: [
					{id:'01',title:'武当金顶最美风景1',comment:996816,showHotIcon:true},
					{id:'02',title:'武当鼎聚潮流音乐节HI秀',comment:6816,showHotIcon:true},
					{id:'03',title:'网红武当名宿',comment:9916,showHotIcon:true},
					{id:'04',title:'武当金顶最美风景',comment:9126,showHotIcon:true},
					{id:'05',title:'武当鼎聚潮流音乐节HI秀',comment:9226,showHotIcon:true},
					{id:'06',title:'网红武当名宿',comment:3456,showHotIcon:true},
					{id:'07',title:'武当鼎聚潮流音乐节HI秀',comment:1314,showHotIcon:true},
					{id:'08',title:'武当金顶最美风景',comment:5220,showHotIcon:true},
					{id:'09',title:'网红武当名宿',comment:131452,showHotIcon:true},
					{id:'10',title:'武当金顶最美风景',comment:131452,showHotIcon:true},
				]
			}
		},
		components: {
			hotListItem,headerNav
		}
	}
</script>

<style lang="scss">
.hot-search{
	.main-imgs{
		width:100%;
		border-radius: 8upx;
		margin: 30upx 28upx;
		box-sizing: border-box;
		box-shadow: 0px 2px 8px 0px rgba(0,0,0,.5);
	}
	.hot-list{
		border-radius: 8upx;
		margin: 16upx 28upx;
		box-sizing: border-box;
	}
}
</style>
